import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Row, Col, Input, Button, Table, Card, message, Icon, Pagination } from 'antd';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { FormattedMessage } from 'umi-plugin-react/locale';
import styles from './index.less';
import PageLoading from '@/components/PageLoading';
@connect(({ notice, loading }) => ({
  notice,
  loading: loading.effects['notice/getNotice'],
}))

class Notice extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      notices: [],
      tableLoading: true,
      total: 0,
      limit: 10
    };
    this.columns = [
      {
        key: 'title',
        align: 'left',
        title: '标题',
        dataIndex: 'title',
        width: 300,
      },
      {
        key: 'content',
        align: 'left',
        title: '通知内容',
        dataIndex: 'content',
      },
      {
        key: 'time',
        align: 'left',
        title: '通知时间',
        dataIndex: 'time',
        width: 200,
      },
      {
        title: '操作',
        align: 'left',
        render: (text, row) => {
          return <div>
            {!row.noticeType == 'shareQA' ? (
              <div>
                <Button type="danger" icon="delete" htmlType='button' size='small' style={{ marginRight: 5 }} onClick={() => this.delNotice(row)}>删除</Button>
              </div>
            ) : (
              <div>
                <Button type="danger" icon="delete" htmlType='button' size='small' style={{ marginRight: 5 }} onClick={() => this.delNotice(row)}>删除</Button>
                {
                  row.operation === null ? (
                    <span>
                      <Button type="primary" icon="check" htmlType='button' size='small' style={{ marginRight: 5 }} onClick={() => this.dealShareNotice(row, true)}>接受</Button>
                      <Button htmlType='button' icon="close" size='small' style={{ marginRight: 5 }} onClick={() => this.dealShareNotice(row, false)}>拒绝</Button>
                    </span>
                  ) : row.operation === 'accept' ? (
                    <Button type="primary" disabled icon="check" htmlType='button' size='small' style={{ marginRight: 5 }} >已接受</Button>
                  ) : (
                    <Button htmlType='button' icon="close" disabled size='small' style={{ marginRight: 5 }} >已拒绝</Button>
                  )
                }
              </div>
            )}
          </div>;
        },
        width: '300px',
      },
    ];
  }

  componentDidMount() {
    this.getNotice()
  }

  onChangeForPage = (number) => {
    this.setState({ page: number }, () => {
      this.getNotice();
    })
  };

  onShowSizeChangeForPage = (current, size) => {
    this.setState({ limit: size, page: current }, () => {
      this.getNotice();
    })
  };

  getNotice = () => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'notice/getNotice',
      payload: { page: this.state.page, limit: this.state.limit },
      callback: (res) => {
        this.setState({
          notices: res.items,
          total: res.total,
          tableLoading: false
        })
      }
    });
  };

  dealShareNotice = (row, type) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/dealShareNotice',
      payload: { from: row.from, isAccpt: type, noticeId: row._id },
      callback: (res) => {
        message.info(res.msg);
        this.getNotice();
        setTimeout(function () {
          location.reload()
        }, 800)
      }
    });
  };

  delNotice = (row, type) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/delectNotice',
      payload: { id: row._id },
      callback: (res) => {
        this.getNotice();
        if (row.operation === null) {
          setTimeout(function () {
            location.reload()
          }, 800)
        }
      }
    });
  };

  render() {
    const { notices, tableLoading, page, total, pageSize } = this.state;
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Card bordered={false}>
            <div style={{ marginBottom: 10 }}>
              <span style={{ fontSize: 16, color: '#000', borderLeft: "5px solid #13c2f3", paddingLeft: 10, }}>通知列表</span>
            </div>
            <Table
              columns={this.columns}
              dataSource={notices}
              rowKey="_id"
              pagination={{  // 分页
                total: total,
                pageSize: pageSize,  // 显示几条一页
                defaultPageSize: page, // 当前页
                showSizeChanger: true,  // 是否显示可以设置几条一页的选项
                showQuickJumper: true,
                onChange: this.onChangeForPage,
                onShowSizeChange: this.onShowSizeChangeForPage
              }}
              loading={tableLoading}
            />
          </Card>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({
  currentUser: user.currentUser
}))(Notice);
